<%@ include file="/common/taglibs.jsp"%>
<script type="text/javascript" src="<c:url value='/scripts/datepicker.js'/>"></script>
<link rel="stylesheet" type="text/css" href="<c:url value='/styles/datepicker.css'/>" />
<%@page import="org.icnmasjid.member.model.Person"%>
<%@page import="org.icnmasjid.member.model.PersonRelation"%>

<script type="text/javascript">
  function getHTML(action, divId, postURL, spinnerId, elementDivId)
  {
//      var url = 'ajaxRole.html';
      var pars;
      if ( action == 'addRole' ) {
		pars = 'personId=' + $F('personId') + '&action=addRole&subOrgId=' + $F('subOrgId') + '&roleId=' + $F('roleId');
	  }
      if ( action == 'deleteRole' ) {
		pars = 'personId=' + $F('personId') + '&action=deleteRole&personSubOrgRoleId=' + $F(elementDivId);
	  }
	  if ( action == 'addPayment' ) {
	  	pars = 'personId=' + $F('personId') + '&action=addPayment&' + Form.serialize('personPaymentForm');
	  }
      if ( action == 'deletePayment' ) {
		pars = 'personId=' + $F('personId') + '&action=deletePayment&personPaymentId=' + $F(elementDivId);
	  }

      var myAjax = new Ajax.Updater(
          divId,
          postURL,
          {
              method: 'post',
              parameters: pars,
              evalScripts: true
          }
      );
      Effect.Pulsate(divId,{ pulses: 1, duration: .5 });
	  return false;
  }

  var myGlobalHandlers = {
    onCreate: function(){
      Element.show(spinnerId);
      Element.hide(divId);
    },

    onComplete: function() {
      if(Ajax.activeRequestCount == 0){
        Element.hide(spinnerId);
        Element.show(divId);
      }
    }
  };

  Ajax.Responders.register(myGlobalHandlers);
</script>




<script type="text/javascript">

function validatePerson(tst)
{
	if (
			validatePhone($('phoneHome'))
		&&	validatePhone($('phoneWork'))
		&&	validatePhone($('phoneMobile'))
		&&	validatePhone($('phoneFax'))
		&&  validateDateField($('dateOfBirth'))
		&&  validateDateField($('residentStartDate'))
	) {
		return true;
	} else {
		return false;
	}
}


function validatePhone(fld, error) {

	error = "";
    var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');
    if ( fld.value != '' ) {
	    if (isNaN(parseInt(stripped))) {
	        error = error + "The phone number contains illegal characters.\n";
	    } else if (!(stripped.length == 10)) {
	        error = error + "The phone number is the wrong length. Make sure you included an area code.\n";
	    }
	}
    if ( error != '' ) {
    	alert(error);
    	fld.focus();
    	return false;
    }
    return true;
}
</script>
<c:choose>
	<c:when test="${primaryPersonId eq null}">
		<c:set var="posturl" value="editPerson.html"/>
	</c:when>
	<c:otherwise>
		<c:set var="posturl" value="editRelationship.html"/>
	</c:otherwise>
</c:choose>
<form:form commandName="person" method="post" action="${posturl}" onsubmit="return validatePerson(this)" id="personForm"  name="personForm" cssClass="box">



<form:hidden path="personId" id="personId"/>

<c:if test="${primaryPersonId ne null}">
<a href="editPerson.html?personId=${primaryPersonId}">Back to primary person ...</a>
<%-- If primary person is is not null it implies we are adding a dependent so we ask the user to enter the relationship type --%>
<input type="hidden" name="primaryPersonId" value='${primaryPersonId}'/>
<ul>
   <li>
       <icnmember:label styleClass="desc" key="person.relationshipType"/>
       <%
			Person person = (Person)pageContext.findAttribute("person");
       		if ( person.getPersonId() != null ) {
				Person primary = (Person)pageContext.findAttribute("primaryPerson");
	       		if ( primary != null ) {
			       	PersonRelation pr =	primary.getPersonRelation(person);
			       	if ( pr != null ) {
			       		pageContext.setAttribute("selectedRelType", pr.getRelationshipType());
			       	}
	       		}
       		}
       %>
		<select name="relationshipTypeId">
			<c:forEach var="rl" items="${relationshipTypes}">
				<option value="${rl.id}" <c:if test="${rl == selectedRelType}">selected='selected'</c:if>>${rl.relationshipType}</option>
			</c:forEach>
		</select>
   </li>
</ul>
</c:if>

<table>
<tr>
	<td>
        <icnmember:label styleClass="desc" key="person.lastName"/>
        <form:errors path="lastName" cssClass="fieldError"/>
        <form:input path="lastName" id="lastName" cssClass="text medium"/>
    </td>
	<td>
        <icnmember:label styleClass="desc" key="person.firstName"/>
        <form:errors path="firstName" cssClass="fieldError"/>
        <form:input path="firstName" id="firstName" cssClass="text medium"/>
    </td>
    <td>
        <icnmember:label styleClass="desc" key="person.dateOfBirth"/>
        <form:errors path="dateOfBirth" cssClass="fieldError"/>
        <form:input path="dateOfBirth" id="dateOfBirth" cssClass="text medium"/>
        <c:set var="dateId" value="dateOfBirth"/>
        <%@ include file="_datePickerFrag.jsp" %>
    </td>
</tr>
<tr>
   <td>
    <icnmember:label styleClass="desc" key="person.gender"/>
	<form:select id="gender" path="gender">
			<form:option value="" label="-"/>
			<form:option value="M" label="Male"/>
			<form:option value="F" label="Female"/>
	</form:select>
   </td>
    <td>
        <icnmember:label styleClass="desc" key="person.email"/>
        <form:errors path="email" cssClass="fieldError"/>
        <form:input path="email" id="email" cssClass="text medium"/>
    </td>

    <td>
        <icnmember:label styleClass="desc" key="person.email2"/>
        <form:errors path="email2" cssClass="fieldError"/>
        <form:input path="email2" id="email2" cssClass="text medium"/>
    </td>
</tr>
<tr>
    <td>
        <icnmember:label styleClass="desc" key="person.phoneHome"/>
        <form:errors path="phoneHome" cssClass="fieldError"/>
        <form:input path="phoneHome" id="phoneHome" cssClass="text medium"/>
    </td>

    <td>
        <icnmember:label styleClass="desc" key="person.phoneWork"/>
        <form:errors path="phoneWork" cssClass="fieldError"/>
        <form:input path="phoneWork" id="phoneWork" cssClass="text medium"/>
    </td>

    <td>
        <icnmember:label styleClass="desc" key="person.phoneMobile"/>
        <form:errors path="phoneMobile" cssClass="fieldError"/>
        <form:input path="phoneMobile" id="phoneMobile" cssClass="text medium"/>
    </td>

    <td>
        <icnmember:label styleClass="desc" key="person.phoneFax"/>
        <form:errors path="phoneFax" cssClass="fieldError"/>
        <form:input path="phoneFax" id="phoneFax" cssClass="text medium"/>
    </td>
</tr>
<c:if test="${primaryPersonId eq null}">
<%-- address entry fields are available only to primary persons --%>
<tr>
    <td>
        <icnmember:label styleClass="desc" key="address.addType"/>
		<form:select id="addressType" path="addressList[0].type">
				<form:option value="" label="-"/>
				<form:option value="home" label="Home"/>
				<form:option value="work" label="Work"/>
				<form:option value="other" label="Other"/>
		</form:select>
    </td>
    <td>
        <icnmember:label styleClass="desc" key="address.addAddress1"/>
        <form:errors path="addressList[0].address1" cssClass="fieldError"/>
        <form:input path="addressList[0].address1" id="address1" cssClass="text medium"/>
    </td>

    <td>
        <icnmember:label styleClass="desc" key="address.addAddress2"/>
        <form:errors path="addressList[0].address2" cssClass="fieldError"/>
        <form:input path="addressList[0].address2" id="address2" cssClass="text medium"/>
    </td>
</tr>
<tr>
    <td>
        <icnmember:label styleClass="desc" key="address.addCity"/>
        <form:errors path="addressList[0].city" cssClass="fieldError"/>
        <form:input path="addressList[0].city" id="city" cssClass="text medium"/>
    </td>

    <td>
        <icnmember:label styleClass="desc" key="address.addState"/>
        <form:errors path="addressList[0].state" cssClass="fieldError"/>
        <form:input size="2" path="addressList[0].state" id="state" cssClass="text medium"/>
    </td>

    <td>
        <icnmember:label styleClass="desc" key="address.addZip"/>
        <form:errors path="addressList[0].zip" cssClass="fieldError"/>
        <form:input size="5" path="addressList[0].zip" id="zip" cssClass="text medium"/>
    </td>

    <td>
        <icnmember:label styleClass="desc" key="address.addCounty"/>
        <form:errors path="addressList[0].county" cssClass="fieldError"/>
        <form:input path="addressList[0].county" id="county" cssClass="text medium"/>
    </td>
    <form:hidden path="addressList[0].id"/>
</tr>
</c:if>
<tr>
    <td>
        <icnmember:label styleClass="desc" key="person.residentStartDate"/>
        <form:errors path="residentStartDate" cssClass="fieldError"/>
        <form:input path="residentStartDate" id="residentStartDate" cssClass="text medium"/>
        <c:set var="dateId" value="residentStartDate"/>
        <%@ include file="_datePickerFrag.jsp" %>
    </td>
<%--
	<c:if test="${primaryPersonId eq null}">
    <td>
        <icnmember:label styleClass="desc" key="person.primaryPerson"/>
	    <form:select id="primary" path="primaryPerson">
			<form:option value="" label="Unknown"/>
			<form:option value="false" label="No"/>
			<form:option value="true" label="Yes"/>
	    </form:select>
    </td>
    </c:if>
--%>

    <td>
        <icnmember:label styleClass="desc" key="person.citizen"/>
	    <form:select id="citizen" path="citizen">
			<form:option value="" label="Unknown"/>
			<form:option value="false" label="No"/>
			<form:option value="true" label="Yes"/>
	    </form:select>
    </td>
	<c:if test="${primaryPersonId eq null}">
    <td>
        <icnmember:label styleClass="desc" key="person.personStatus"/>
	    <form:select id="personStatus" path="personStatus">
  			<form:option value="" label="-"/>
			<form:option value="Active"/>
			<form:option value="Inactive"/>
	    </form:select>
    </td>
    </c:if>
    <td>
        <icnmember:label styleClass="desc" key="person.optInForTextMessages"/>
	    <form:checkbox id="optInTextMessages" path="optInForTextMessages"/>
    </td>
</tr>
<tr>
    <td>
        <icnmember:label styleClass="desc" key="person.employerName"/>
        <form:errors path="employerName" cssClass="fieldError"/>
        <form:input path="employerName" id="employerName" cssClass="text medium"/>
    </td>
    <td>
        <icnmember:label styleClass="desc" key="person.notes"/>
        <form:errors path="notes" cssClass="fieldError"/>
        <form:textarea path="notes" id="notes" cssClass="textarea"/>
    </td>
    <td>
        <icnmember:label styleClass="desc" key="person.verified"/>
        <form:errors path="verified" cssClass="fieldError"/>
        <form:checkbox path="verified" id="verified"/>
        Last Verified Date: ${person.verifiedDate}
    </td>
    <td>
        <icnmember:label styleClass="desc" key="person.registeredToVote"/>
	    <form:checkbox id="registeredToVote" path="registeredToVote"/>
    </td>    
</tr>
<tr>
    <td>
        <icnmember:label styleClass="desc" key="person.employerMatchesDonation"/>
	    <form:checkbox id="employerMatchesDonation" path="employerMatchesDonation"/>   
	</td>
    <td>
        <icnmember:label styleClass="desc" key="person.comments"/>
        <form:errors path="comments" cssClass="fieldError"/>
        <form:textarea path="comments" id="comments" cssClass="textarea"/>
    </td> 
    <td>
        <icnmember:label styleClass="desc" key="person.rfid"/>
        <form:errors path="rfid" cssClass="fieldError"/>
        <form:input path="rfid" id="rfid" cssClass="text medium"/>
    </td>   
</tr>
<tr>
    <td>
<!--  Display two checkboxes for now 2007 and 2008 -->
        <icnmember:label styleClass="desc" key="memberInformation.yearOfMembership"/>
        <form:checkbox path="memberYear" id="2007Member" value="2007"/> 2007,
        <form:checkbox path="memberYear" id="2008Member" value="2008"/> 2008,
        <form:checkbox path="memberYear" id="2009Member" value="2009"/> 2009,
        <form:checkbox path="memberYear" id="2010Member" value="2010"/> 2010,
        <form:checkbox path="memberYear" id="2011Member" value="2011"/> 2011,
        <form:checkbox path="memberYear" id="2012Member" value="2012"/> 2012,
        <form:checkbox path="memberYear" id="2013Member" value="2013"/> 2013,
        <form:checkbox path="memberYear" id="2014Member" value="2014"/> 2014,
        <form:checkbox path="memberYear" id="2015Member" value="2015"/> 2015,
        <form:checkbox path="memberYear" id="2016Member" value="2016"/> 2016,
        <form:checkbox path="memberYear" id="2017Member" value="2017"/> 2017
    </td>
</tr>
<tr>
    <td>
        <icnmember:label styleClass="desc" key="person.allergies"/>
        <form:errors path="allergies" cssClass="fieldError"/>
        <form:textarea path="allergies" id="allergies" cssClass="textarea"/>
    </td>
</tr>

</table>

<ul>
    <li class="buttonBar bottom">
        <input type="submit" class="button" name="save"  onclick="bCancel=false" value="<fmt:message key="button.save"/>" />
        <input type="submit" class="button" name="delete" onclick="bCancel=true;return confirmDelete('Person')" value="<fmt:message key="button.delete"/>" />
        <input type="submit" class="button" name="cancel" onclick="bCancel=true" value="<fmt:message key="button.cancel"/>" />
    </li>
</ul>

</form:form>
<div class="box">
	<div>
		<table>
			<tr>
				<td>
		            <select name="Org" id="subOrgId">
		            	<c:forEach var="subOrg" items="${subOrgs}">
		                	<option value="${subOrg.id}">${subOrg.fullName}</option>
						</c:forEach>
		            </select>
				</td>
				<td>
		            <select name="Role" id="roleId">
		            	<c:forEach var="role" items="${roles}">
		                	<option value="${role.id}" <c:if test="${role.id == 6}">selected='selected'</c:if>>${role.name}</option>
						</c:forEach>
		            </select>
				</td>
				<td>
					<button onclick="getHTML('addRole','personSubOrgRolesId','ajaxRole.html','systemWorking');">Add</button>
				</td>
			</tr>
		</table>
	</div>
    <div id='systemWorking' style="display:none;"><img src='images/ajax-loader.gif'></div>
    <c:import url="ajax_personRole.jsp"/>
</div>
<div class="box">
	<form:form commandName="person" method="post" action="#" onsubmit="return false;" id="personPaymentForm"  name="personPaymentForm">
	<div>
		<table>
			<tr>
				<td>
					Amt: <form:input path="personPayment.paymentAmount" id="paymentAmt"></form:input>
				</td>
				<td>
					Date: <form:input path="personPayment.paymentDate" id="paymentDate"></form:input>
					        <c:set var="dateId" value="paymentDate"/>
					        <%@ include file="_datePickerFrag.jsp" %>

				</td>
				<td>
					Method: <form:input path="personPayment.paymentMethod" id="paymenMethod"></form:input>
				</td>
				<td>
					Category:
		            <form:select path="personPayment.paymentCategory" id="paymentCategory">
		            	<c:forEach var="pc" items="${paymentCategories}">
		                	<option value="${pc.id}">${pc.name}</option>
						</c:forEach>
		            </form:select>
				</td>
				<td>
					<button onclick="getHTML('addPayment','personPaymentsId', 'ajaxPayment.html','systemWorking1');">Add</button>
				</td>
			</tr>
		</table>
	</div>
	</form:form>
    <div id='systemWorking1' style="display:none;"><img src='images/ajax-loader.gif'></div>
    <c:import url="ajax_personPayment.jsp"/>
</div>
